<template>
  <div class="s-warp">
    <div class="s-title">{{title}}</div>
    <n-dropdown trigger="hover" :options="options" @select="handleSelect" :disabled="disabled">
      <n-button>{{selected}}</n-button>
    </n-dropdown>
  </div>
</template>

<script setup>
import {defineEmits, defineProps, ref} from 'vue'
import { NDropdown, NButton } from 'naive-ui'
let { title, options, disabled } = defineProps(['options', 'title', 'disabled'])

let selected = ref(options[0].label)

let emit = defineEmits(['update:modelValue'])
function handleSelect(e) {
  emit('update:modelValue', e)
  selected.value = e
}
</script>

<style scoped>
@import "@/style/setting.css";
</style>
